<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>订单管理</title>
    <!-- 引入 bootstrap的 css -->
    <link type="text/css" rel="stylesheet" th:href="@{plugins/bootstrap-3.4.1-dist/css/bootstrap.min.css}"/>
    <!-- 引入分页插件pagination的css样式文件 -->
    <link type="text/css" rel="stylesheet" th:href="@{plugins/pagination-2.1.5/css/pagination.css}">
    <!-- 引入 jquery 框架，需要第一个引入，因为其他的js会使用该框架 -->
    <script type="text/javascript" th:src="@{plugins/jquery-3.6.0/jquery-3.6.0.min.js}"></script>
    <!-- 引入 bootstrap的js -->
    <script type="text/javascript" th:src="@{plugins/bootstrap-3.4.1-dist/js/bootstrap.min.js}"></script>
    <!-- 引入假分页控件pagination的js -->
    <script type="text/javascript" th:src="@{plugins/pagination-2.1.5/js/pagination.min.js}"></script>
    <!-- 引入自己写的js -->
    <script type="text/javascript" th:src="@{js/backstage/orderManager.js}"></script>
</head>
<body>
<div style="width: 98%">
    <form id="queryForm" class="form-horizontal" style="padding-top: 20px;">
        <div class="form-group">
            <label class="col-sm-2 control-label">用户名：</label>
            <div class="col-sm-3">
                <input type="text" id="account" name="account" placeholder="请输入用户名" class="form-control">
                <span class="help-block m-b-none"></span>
            </div>

            <label class="col-sm-2 control-label">联系电话：</label>
            <div class="col-sm-3">
                <input type="text" id="tel" name="tel" placeholder="请输入联系电话" class="form-control">
                <span class="help-block m-b-none"></span>
            </div>
        </div>

        <div class="form-group">
            <label class="col-sm-2 control-label">地址：</label>
            <div class="col-sm-3">
                <input type="text" id="address" name="address" placeholder="请输入地址" class="form-control">
            </div>

            <label class="col-sm-2 control-label">出生日期：</label>
            <div class="col-sm-3">
                <div class="col-sm-5">
                    <input name="birthStart" type="date" placeholder="请输入开始日期" class="form-control">
                </div>
                <div class="col-sm-2">
                    &nbsp;&nbsp;-
                </div>
                <div class="col-sm-5">
                    <input name="birthEnd" type="date" placeholder="请输入结束日期" class="form-control">
                </div>
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-offset-3 col-sm-2">
                <button class="btn btn-sm btn-white" type="button" onclick="queryAllUsers()">查询</button>
            </div>
            <div class="col-sm-offset-3 col-sm-2">
                <button class="btn btn-sm btn-white" type="button" onclick="showAddUserModal()">新增</button>
            </div>
        </div>
    </form>
</div>
<div class="bs-example table-responsive" data-example-id="hoverable-table">
    <table class="table table-hover text-nowrap" height="200px">
        <thead>
        <tr>
            <th>序号</th>
            <th>用户名</th>
            <th>密码</th>
            <th>昵称</th>
            <th>真实姓名</th>
            <th>家庭地址</th>
            <th>邮编</th>
            <th>手机号</th>
            <th>性别</th>
            <th>积分</th>
            <th>等级</th>
            <th>冻结</th>
            <th>出生日期</th>
            <th>头像</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody id="showMsg">

        </tbody>
    </table>
    <div id="queryPager"></div>
</div>

<!-- ======================新增和修改弹出模态框 modal====================== -->
<div id="userInfoModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="gridSystemModalLabel">
    <div class="modal-dialog" role="document" style="width: 1000px">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="gridSystemModalLabel">用户信息管理</h4>
            </div>
            <div class="modal-body">
                <!-- 这里放置 modal 的表单 start -->
                <div class="ibox-content">
                    <form id="insertform" action="addAndUpdateUserInfo" method="post" class="form-horizontal"
                          enctype="multipart/form-data">
                        <!-- 隐藏表单域：用于存储记录的id值 -->
                        <input type="hidden" id="uid" name="uid">
                        <!-- 用户名、密码 -->
                        <div class="form-group">
                            <label class="col-sm-2 control-label">用户名</label>
                            <div class="col-sm-3">
                                <input type="text" id="account_edit" name="account" class="form-control">
                                <span class="help-block m-b-none" id="account-label" style="color: #ff0000"></span>
                            </div>

                            <label class="col-sm-2 control-label">密码</label>
                            <div class="col-sm-3">
                                <input type="password" id="password" name="password" class="form-control">
                                <!-- <span class="help-block m-b-none">密码由字母、数字、特殊符号组成</span> -->
                                <span class="help-block m-b-none" id="password-label" style="color: red"></span>
                            </div>
                        </div>

                        <div class="hr-line-dashed"></div>
                        <!-- 真实姓名、昵称 -->
                        <div class="form-group">
                            <label class="col-sm-2 control-label">真实姓名</label>
                            <div class="col-sm-3">
                                <input type="text" id="truename" name="truename" class="form-control">
                                <span class="help-block m-b-none" id="truename-label" style="color: #ff0000"></span>
                            </div>

                            <label class="col-sm-2 control-label">昵称</label>
                            <div class="col-sm-3">
                                <input type="text" id="nickname" name="nickname" class="form-control">
                                <span class="help-block m-b-none" id="nickname-label" style="color: red"></span>
                            </div>
                        </div>

                        <div class="hr-line-dashed"></div>
                        <!-- 所在地 -->
                        <div class="form-group">
                            <label class="col-sm-2 control-label">所在地</label>
                            <div class="col-sm-2">
                                <select class="form-control" id="province" name="province" onchange="getCityByProId(this.value)"></select>
                            </div>
                            <label class="col-sm-1"></label>
                            <div class="col-sm-2">
                                <select class="form-control" id="city" name="city" onchange="getDistrictByCityId(this.value)"></select>
                            </div>
                            <label class="col-sm-1"></label>
                            <div class="col-sm-2">
                                <select class="form-control" id="district" name="district"></select>
                            </div>
                        </div>

                        <div class="hr-line-dashed"></div>
                        <!-- 详细地址、默认收获地址 -->
                        <div class="form-group">
                            <label class="col-sm-2 control-label">详细地址</label>
                            <div class="col-sm-3">
                                <input type="text" id="address_edit" name="address" class="form-control">
                                <span class="help-block m-b-none" id="address-label" style="color: red"></span>
                            </div>

                            <label class="col-sm-2 control-label">默认收获地址</label>
                            <div class="col-sm-3">
                                <input type="text" id="defaultAddress" name="defaultAddress" class="form-control">
                                <span class="help-block m-b-none" id="defaultAddress-label" style="color: #ff0000"></span>
                            </div>
                        </div>

                        <div class="hr-line-dashed"></div>
                        <!-- 邮编、联系电话 -->
                        <div class="form-group">
                            <label class="col-sm-2 control-label">邮编</label>
                            <div class="col-sm-3">
                                <input type="text" id="postcode" name="postcode" class="form-control">
                                <span class="help-block m-b-none" id="postcode-label" style="color: red"></span>
                            </div>

                            <label class="col-sm-2 control-label">联系电话</label>
                            <div class="col-sm-3">
                                <input type="text" id="tel_edit" name="tel" class="form-control">
                                <span class="help-block m-b-none" id="tel-label" style="color: red"></span>
                            </div>
                        </div>

                        <div class="hr-line-dashed"></div>
                        <!-- 性别、积分 -->
                        <div class="form-group">
                            <label class="col-sm-2 control-label">性别</label>
                            <div class="col-sm-3">
                                <label class="radio-inline"><input type="radio" name="sex" id="sex1" value="男" checked >男</label>
                                <label class="radio-inline"><input type="radio" name="sex" id="sex2" value="女">女</label>
                                <span class="help-block m-b-none" id="sex-label" style="color: red"></span>
                            </div>

                            <label class="col-sm-2 control-label">积分</label>
                            <div class="col-sm-3">
                                <input type="text" id="accumulatePoints" name="accumulatePoints" class="form-control">
                                <span class="help-block m-b-none" id="accumulatePoints-label" style="color: #ff0000"></span>
                            </div>
                        </div>

                        <div class="hr-line-dashed"></div>
                        <!-- 等级、是否冻结 -->
                        <div class="form-group">
                            <label class="col-sm-2 control-label">等级</label>
                            <div class="col-sm-3">
                                <input type="text" id="grade" name="grade" class="form-control">
                                <span class="help-block m-b-none" id="grade-label" style="color: red"></span>
                            </div>

                            <label class="col-sm-2 control-label">是否冻结</label>
                            <div class="col-sm-3">
                                <input type="text" id="freeze" name="freeze" class="form-control">
                                <span class="help-block m-b-none" id="freeze-label" style="color: #ff0000"></span>
                            </div>
                        </div>

                        <div class="hr-line-dashed"></div>
                        <!-- 出生日期、头像 -->
                        <div class="form-group">
                            <label class="col-sm-2 control-label">出生日期</label>
                            <div class="col-sm-3">
                                <input type="date" id="birth" name="birth" placeholder="选择出生日期" class="form-control">
                                <span class="help-block m-b-none" id="birth-label" style="color: red"></span>
                            </div>

                            <label class="col-sm-2 control-label">头像</label>
                            <div class="col-sm-3">
                                <!-- 因为文件要使用 MultipartFile 进行映射，所以不要和实体类的属性名，保持一致 -->
                                <!--                                <img src='" + eachUserBean.photo + "' width='50px' height='30px'>-->
                                <!--                                <img alt="image" class="img-circle" th:src="@{plugins/Hplus-v.4.1.0/img/profile_small.jpg}" />-->
                                <input type="file" id="photo" name="file_photo" class="form-control">
                                <span class="help-block m-b-none" id="photo-label" style="color: red"></span>
                            </div>
                        </div>
                    </form>
                </div>
                <!-- 这里放置 modal 的表单 end -->
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button id="save" type="button" class="btn btn-primary" onclick="distribution()">保存</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
</body>
</html>